<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useLayoutStore } from '@/stores/useLayout';
import { getRequest } from '@/comm/request'

const keyword = ref('')
const select = ref('')
const layoutStore = useLayoutStore()
const options = ref<any[]>([])
const value = ref('')
const loading = ref(false)

const emit = defineEmits(["change"])

const onChange = (e: any) => {
  console.log(e)
  // emit("change", e)
  const img = 'https://static.infomate.co.nz/infomate/ad_medias/ARC_SeasonLaunchEvent__MG_1374_NlPVo6X.jpeg'
  const obj = options.value.find(item => item.id == e)
  if (obj) {
    layoutStore.changeTempData(obj.title, obj.description, img, obj.id)
    value.value = ''
  }
}

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    // setTimeout(() => {

    //   loading.value = false
    //   options.value = list.value.filter((item) => {
    //     return item.label.toLowerCase().includes(query.toLowerCase())
    //   })
    // }, 3000)
    getRequest("/api/im/post/", {
      q: query
    })
      .then(res => {
        console.log(res, "res")
        const { list, count } = res
        if (list) {
          // options.value = list.map(item => {
          //   return {
          //     value: item.id,
          //     label: item.title
          //   }
          // })
          options.value = list
        }
        else {
          options.value = []
        }

      })
      .catch(err => {
        console.log(err, 'err')
      })
      .finally(() => {
        loading.value = false

      })
  }
}

</script>
<template>
  <el-select v-model="value" filterable remote reserve-keyword placeholder="Please enter a keyword"
    :remote-method="remoteMethod" :loading="loading" @change="onChange">
    <el-option class="jdw" v-for="item in options" :key="item.id" :label="item.title" :value="item.id">
      <div class="opts">
        <div class="o-title ones">{{ item.title }} This template should help get you started developing</div>
        <div class="o-desc ones">{{ item.description }} This template should help get you started developing</div>
      </div>
    </el-option>
    <template #loading>
      <svg class="circular" viewBox="0 0 50 50">
        <circle class="path" cx="25" cy="25" r="20" fill="none" />
      </svg>
    </template>
  </el-select>

  <!-- <el-input v-model="keyword" style="max-width: 600px" placeholder="Please input" class="input-with-select">
    <template #prepend>
      <el-select v-model="select" placeholder="Select" style="width: 90px">
        <el-option label="id" value="id" />
        <el-option label="title" value="title" />
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search" @click="onSearch" />
    </template>
  </el-input> -->
</template>

<style lang="less" scoped>
@import url("./base.less");

.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}

.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}

.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}

.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}

.opts {
  border-bottom: solid 1px #f0f0f0;

  .o-title {
    font-size: 14px;
    color: #333;
  }

  .o-desc {
    font-size: 12px;
    color: #999;
  }
  .ones{
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.jdw {
  height: auto !important;
  line-height: 20px !important;
}
</style>